<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入小区或地址"
      class="search-box"
      show-action
      background="#4fc08d"
    >
      <template #left
        ><van-icon name="arrow-left" color="#fff" size="23"
      /></template>
      <template #label
        >{{ city.label
        }}<span class="xsjx" @click="$router.push('/city')">▼</span
        >&nbsp;|&nbsp;</template
      >
      <template #action
        ><van-icon
          name="location-o"
          class="ditu"
          color="#fff"
          size="23"
          @click="$router.push('/map')"
      /></template>
    </van-search>
    <van-sticky>
      <van-dropdown-menu>
        <!-- 区域 -->
        <van-dropdown-item ref="item1" title="区域">
          <van-picker
            :columns="area"
            show-toolbar
            toolbar-position="bottom"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
          />
        </van-dropdown-item>
        <!-- 方式 -->
        <van-dropdown-item title="方式" ref="item2">
          <van-picker
            :columns="rentType"
            show-toolbar
            toolbar-position="bottom"
            @confirm="onConfirm2"
            @cancel="onCancel2"
            @change="onChange2"
          />
        </van-dropdown-item>
        <!-- 租金 -->
        <van-dropdown-item title="租金" ref="item3">
          <van-picker
            :columns="price"
            show-toolbar
            toolbar-position="bottom"
            @confirm="onConfirm3"
            @cancel="onCancel3"
            @change="onChange3"
          />
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="item4" @open="show = true">
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <!-- @load="onLoad" -->
      <van-card
        v-for="item in houseList"
        :key="item.houseCode"
        :title="item.title"
        :desc="item.desc"
        :thumb="'http://liufusong.top:8080' + item.houseImg"
      >
        <template #price>
          <span class="qian">{{ item.price }}</span> <span>元/月</span>
        </template>
        <template #tags>
          <van-tag
            v-for="(item1, index) in item.tags"
            :key="index"
            plain
            type="primary"
            >{{ item1 }}</van-tag
          >
        </template>
      </van-card>
    </van-list>

    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', weight: '75%' }"
    >
      <HomeSx :list="roomType" title="户型"></HomeSx>
      <HomeSx :list="oriented" title="楼层"></HomeSx>
      <HomeSx :list="floor" title="朝向"></HomeSx>
      <HomeSx :list="characteristic" title="亮点"></HomeSx>
    </van-popup>
  </div>
</template>

<script>
import { getHouses, getCondition, getJqhouse } from '@/api/list'
import HomeSx from '@/components/homesx.vue'
export default {
  name: 'list-pag1e',
  components: {
    HomeSx
  },
  data() {
    return {
      value: '',
      area: [],
      rentType: [],
      price: [],
      characteristic: [],
      floor: [],
      oriented: [],
      roomType: [],
      obj: {},
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      },
      houseList: [],
      show: false,
      list: [],
      loading: false,
      finished: false,
      params: {
        cityId: 'AREA|88cff55c-aaa4-e2e0',
        start: 1,
        end: 20
      }
    }
  },
  methods: {
    onConfirm(value, index) {
      this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.$refs.item1.toggle()
      // console.log(value)
      console.log(index)
      console.dir(value)
      console.log(this.columns1[0].children[1].children[1].value)
    },
    onChange(picker, value, index) {
      this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel() {
      this.$toast('取消')
      this.$refs.item1.toggle()
    },

    async onConfirm2(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.obj.fs = value.value
      const res = await getJqhouse(
        JSON.parse(window.localStorage.getItem('city')),
        this.obj
      )
      this.houseList = [...res.body.list]

      // console.log(res)

      this.$refs.item2.toggle()
      // console.log(value.value)
    },
    onChange2(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel2() {
      this.$toast('取消')
      this.$refs.item3.toggle()
    },

    async onConfirm3(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      // console.log(value.value)
      this.obj.price = value.value
      const res = await getJqhouse(
        JSON.parse(window.localStorage.getItem('city')),
        this.obj
      )
      // console.log(res)
      this.houseList = [...res.body.list]
      this.$refs.item3.toggle()
    },
    onChange3(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel3() {
      // this.$toast('取消')
      this.$refs.item3.toggle()
    }

    // async onLoad() {
    //   const {
    //     body: { list }
    //   } = await getHouses(this.params)
    //   console.log(list)
    //   this.houseList.push(...list)
    //   this.loading = false
    //   this.params.start = this.params.end + 1
    //   this.params.end += 20
    //   if (list.length === 0) {
    //     this.finished = true
    //   }
    // }
  },

  async created() {
    const res = await getHouses(this.city.value)
    // console.log(res)
    const res1 = await getCondition(this.city.value)
    // console.log(res.body)
    // console.log(res1.body)

    this.roomType = res1.body.roomType
    this.oriented = res1.body.oriented
    this.floor = res1.body.floor
    this.characteristic = res1.body.characteristic
    // console.log(this.characteristic)

    this.params.cityId = this.city.value

    this.houseList.push(...res.body.list)
    // console.log(this.houseList)

    this.area[0] = res1.body.area
    this.area[1] = res1.body.subway

    // 区域
    this.area = JSON.parse(JSON.stringify(this.area).replace(/label/g, 'text'))
    this.area[0].children[0].children = ['']
    this.area[1].children[0].children = ['']
    // console.log(this.area)

    // 方式
    this.rentType = JSON.parse(
      JSON.stringify(res1.body.rentType).replace(/label/g, 'text')
    )
    // console.log(this.rentType)

    // 租金
    this.price = JSON.parse(
      JSON.stringify(res1.body.price).replace(/label/g, 'text')
    )
  }
}
</script>

<style scoped lang="less">
.list-box {
  margin-left: 15px;
  width: 340px;
  height: 120px;
  border-bottom: 1px solid #999;
  .zuo {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    img {
      width: 106px;
      height: 80px;
    }
  }
  .you {
    width: 200px;
    padding-top: 10px;
    float: left;
  }
}

.van-icon-arrow-left:before {
  padding-right: 10px;
}

.van-icon-location-o:before {
  padding-top: 10px;
}

.van-search {
  height: 50px;
}

/deep/ .van-picker__confirm {
  color: #fff;
  background-color: #21b97a;
  font-size: 18px;
  width: 250px;
  border-top: #e9e9e9 1px solid;
}

/deep/ .van-picker__cancel {
  color: #21b97a;
  background-color: #fff;
  font-size: 18px;
  width: 125px;
  border-top: #e9e9e9 1px solid;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: right;
  height: 100%;
}

.block {
  width: 76%;
  // height: 100%;
  padding-top: 5000px;
  background-color: #fff;
}

.van-tag--primary.van-tag--plain {
  color: #39becd;
  background-color: #e1f5f8;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0);
}

.van-card__price {
  display: inline-block;
  color: red;
  font-weight: 500;
  font-size: 12px;
  .qian {
    font-weight: 700;
    font-size: 16px;
  }
}

.van-card__desc {
  max-height: 5.33333vw;
  color: #afb2b3;
  line-height: 5.33333vw;
  font-size: 12px;
}

.van-card__title {
  max-height: 8.53333vw;
  font-weight: 700;
  line-height: 4.26667vw;
  font-size: 15px;
  color: #394043;
  margin-bottom: 4px;
  margin-top: 6px;
}

/deep/ .van-card__thumb img {
  border-radius: 0;
  width: 106px;
  height: 80px;
  margin: 5px 0px;
  padding-left: -10px;
  padding-right: 15px;
}

.van-card {
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
</style>
